// 生成菜单
var menuItem = Vue.extend({
	name: 'menu-item',
	props:{item:{}},
	template:[
		'<li class="layui-nav-item">',
		'<a v-if="item.type === 0" href="javascript:;">',
		'<i	class="iconfont" :class="item.icon"></i>',
		'{{item.name}}',
		'</a>',
		'<dl v-if="item.type === 0" class="layui-nav-child">',
		'<menu-item :item="item" v-for="item in item.children" :key="item.id"></menu-item>',
		'</dl>',
		'<dd v-if="item.type === 1"><a :data-url="item.url" :data-id="item.id" :data-title="item.name"  data-type="tabAdd"><i class="iconfont" :class="item.icon"></i>{{item.name}}</a></dd>',
		'</li>'
	].join('')
});

// 注册菜单组件
Vue.component('menuItem',menuItem);

var vm = new Vue({
	el:'#vIndex',
	data:{
		user:{},
		menuList:{},
		navTitle:"控制台",
		selectList: {},
		roleList:{}
	},
	methods: {
		getUser: function(){
			$.get("user/info?_"+Math.random(),function(r){
				vm.user = r.user;
			});
		},
		getMenuList: function(){
			$.get("menu/user?_"+Math.random(),function(r){
				vm.menuList = r.data;
				vm.initialize();
			});
		},
		getRoleList: function(){
			$.get("role/roleList?_"+Math.random(),function(r){
				vm.roleList = r.roleList;
			});
		},
		initialize: function(){
			layui.use('element', function() {
				var element = layui.element;
				
	            // 触发事件
	            var active = {
	                // 在这里给active绑定几项事件，后面可通过active调用这些事件
	                tabAdd: function(url,id,name) {
	                    element.tabAdd('content', {
	                        title: name
	                        , content: '<iframe id="iframe_content" data-frameid="'+id+'" frameborder="0" name="content" width="100%" src="' + url + '"></iframe>'
	                        , id: id
	                    })
	                },
	                tabChange: function(id) {
	                    // 切换到指定Tab项
	                    element.tabChange('content', id);
	                }, 
	            };
				// 一些事件监听
	            element.on('nav(menu)', function(elem){
					var dataid = elem.find('a');
					if ($(".layui-tab-title li[lay-id]").length <= 0) {
						active.tabAdd(dataid.attr('data-url'), dataid.attr('data-id'),dataid.attr("data-title"));
					}else {
	                    var isData = false;
	                    $.each($(".layui-tab-title li[lay-id]"), function () {
	                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
	                            isData = true;
	                        }
	                    })
	                    if (isData == false) {
	                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
	                    }
	                }
	                // 最后不管是否新增tab，最后都转到要打开的选项页面上
	                active.tabChange(dataid.attr("data-id"));
				});
	            
			});
		},
		logout: function(){
			layui.use('layer', function(){
				var layer = layui.layer;
				layer.msg('你确定要退出么？', {
					icon: 6,
					time:0,
					btn: ['确定', '取消'],
					yes: function(index){
						$.get("logout",function(r){
							window.location.href = 'sign.html';
						});
					}
				});
			});
		},
		selectInit () {
			$.ajax({
				url: 'dict/list',
				success: function (res) {
					vm.initSelectList(res.data);
				}
			})
		},
		initSelectList (list) {
			for (let i in list) {
				this.selectList[list[i].value] = list[i].children;
				list[i].children.length > 0 ? vm.initSelectList(list[i].children) : '';
			}
		},
	},
	created: function(){
		this.getUser();
		this.getMenuList();
		this.getRoleList();
		this.selectInit();
	},
	updated: function(){
		// 路由
	}
})
